<template>
    <card title="更换备件清单">
      <q-btn
        slot="btn"
        outline
        color="primary"
        label="添加备件"
        @click="addTab"
      />
      <div class="page-content" style="max-height: 500px;width: 100%">
        <q-table
          :data="tableData"
          :columns="columns"
          row-key="id"
          class="scroll stick-last-col"
          :loading="isTableLoading"
          :pagination.sync="pagination"
          :hide-bottom="tableData.length > 0"
          no-data-label="暂无数据"
          color="primary"
        >
          <template v-slot:body-cell-index="props">
            <q-td>
              {{ props.row.__index + 1 }}
            </q-td>
          </template>
          <template v-slot:body-cell-count="props">
            <q-td class="" style="width: 200px;padding: 14px 5px 0 0px">
                          <yz-input  v-model="props.row.count"
                                     style="width: 160px"
                                     :rules="[0, 3]"
                                     title=""
                          />
            </q-td>
          </template>
          <template v-slot:body-cell-operations="props">
            <q-td class="operations" style="width: 100px">
              <div class="btn-group text-center">
                <table-btn
                  btnType="delete"
                  @click="deleteItem(props.row.__index)"
                />
              </div>
            </q-td>
          </template>
        </q-table>
      </div>
      <select-spare-dialog
        :open="isShowSelectDialog"
        @close="isShowSelectDialog = false"
        @onSetCutter="onSetCutter"
        :cutterData="tableData"
        :isMultiple="true"
      />
    </card>
</template>
<script>
import Card from './card'
import SelectSpareDialog from '../../inventory/components/select-spare-dialog'
export default {
  name: 'part-table',
  components: { SelectSpareDialog, Card },
  data () {
    return {
      tableData: [],
      isTableLoading: false,
      isShowSelectDialog: false,
      pagination: {
        rowsPerPage: 0
      },
      columns: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        { name: 'number', label: '备件编号', align: 'left', field: 'number' },
        { name: 'name', label: '备件名称', align: 'left', field: 'name' },
        {
          name: 'categoryName',
          label: '所属分类',
          align: 'left',
          field: 'categoryName'
        },
        { name: 'spec', label: '规格', align: 'left', field: 'spec' },
        { name: 'count', label: '数量', align: 'left', field: 'count' },
        {
          name: 'operations',
          label: '操作',
          align: 'center',
          field: 'operations'
        }
      ]
    }
  },
  methods: {
    initData (val) {
      this.tableData = val.map(v => {
        return {
          ...v,
          id: v.sparePartId,
          name: v.sparePartName,
          number: v.sparePartNumber,
          categoryName: v.sparePartCategory,
          spec: v.sparePartSpec,
          unitName: v.sparePartUnit,
          count: v.outCount || 0
        }
      })
    },
    addTab () {
      this.isShowSelectDialog = true
    },
    onSetCutter (val) {
      console.log(val)
      this.isShowSelectDialog = false
      const row = val.map(v => {
        return {
          ...v,
          count: ''
        }
      })
      this.tableData = [...this.tableData, ...row]
    },
    deleteItem (index) {
      this.tableData.splice(index, 1)
    }
  }
}
</script>
